<template>
  <div class="setting-map">
    <yEchart ref="yEchart" :options="options" />
  </div>
</template>

<script>
export default {
  name: "setting-map",
  data() {
    return {
      options: {},
      mapName: "china",
      data: null,
    };
  },
  methods: {
    async initMap() {
      let { data } = await axios.get("/static/china.json", {
        noApped: true,
      });
      this.$echarts.registerMap(this.mapName, data);
      this.data = data;
    },
    async initOptions(options) {
      this.options = options;
    },
  },
  async mounted() {
    await this.initMap();
    let options = {
      series: [
        {
          map: this.mapName,
          zoom: 1.2,
          type: "map",
          aspectScale: 0.8,
          selectedMode: "single",
          hoverable: false,
          roam: true,
          itemStyle: {
            normal: {
              areaColor: "#c3d6d6",
              borderWidth: 2,
              borderColor: "#99999",
              label: {
                show: true,
              },
            },
            emphasis: {
              areaColor: "#1560e1",
              borderWidth: 2,
              borderColor: "#99999",
              borderType: "dashed",
              label: {
                show: true,
              },
            },
          },
          data: [],
        },
      ],
    };
    await this.initOptions(options);
    this.$refs.yEchart.init();
  },
};
</script>

<style lang="scss" scoped>
.setting-map {
  width: 100%;
  height: 100%;
}
</style>